<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<!-- <text class="cuIcon-circlefill text-grey"></text> -->
						<text class="text-grey">员工（申报个税）总人数</text>
					</view>
					<view class="action">
						<input class="input" type="number" :maxlength="10" v-model="persons"
							placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">员工年平均工资</text>
					</view>
					<view class="action">
						<input class="input" type="digit" :maxlength="15" v-model="avgPay"
						placeholder="请输入" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">重残就业人数</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('实际缴纳社保的基数与当地月平均工资的比值，“年度平均缴纳工资指数”即是所缴纳年限的缴纳工资指数的平均值')"></image>
					</view>
					<view class="action"><input class="input" type="number" :maxlength="10" v-model="heavy"
						placeholder="请输入" placeholder-class="placeholder" /></view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="text-grey">轻残就业人数</text>
						<image src="/static/images/info.png" class="png" mode="aspectFit"
						@click="showInfo('实际缴纳社保的基数与当地月平均工资的比值，“年度平均缴纳工资指数”即是所缴纳年限的缴纳工资指数的平均值')"></image>
					</view>
					<view class="action">
						<view class="action"><input class="input" type="number" :maxlength="10" v-model="light"
								placeholder="请输入" placeholder-class="placeholder" />
						</view>
					</view>
				</view>
				
				<view class="cu-item bottom">
					<view class="content">
						<view class="cu-btn round bg-blue" @tap="getResult()">查看测算结果</view>
					</view>
				</view>
			</view>

		</scroll-view>
		
		<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				
				<view class="cu-list menu text-left solid-top">
					<view class="cu-item">
						<view class="content">
							<view class="text-grey">应安置轻残人数</view>
						</view>
						<view class="action"><text class="text-grey  text-sm">约{{resultList.should}}人</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey ">实际安置轻残人数</text>
						</view>
						<view class="action"><text class="text-grey  text-sm">约{{resultList.already}}人</text></view>
					</view>
					<view class="cu-item ">
						<view class="content">
							<text class="text-grey">年度应缴纳残保费用</text>
						</view>
						<view class="action"><text class="text-grey text-sm">约{{resultList.money}}元</text></view>
					</view>
					
					<view class="cu-item block">
						<view class="content">
						<view class="text-red">测算结果只作参考</view>
						<view class="cu-btn bg-blue round recount" @click="hideModal">重新测算</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				persons: '',
				avgPay: '',
				heavy: '',
				light: '',
				resultList:[],
				modalName: null,
			};
		},
		methods: {
			goPage(page){
				uni.navigateTo({
					url: page
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			showInfo(msg){
				uni.showToast({
					title:msg,
					icon:'none',
					duration: 2000
				})
			},
			
			async getResult(){
				let param = {people:this.persons,wages:this.avgPay,heavy:this.heavy,light:this.light};
				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				    
				let data = await this.$http.post(
					'disability', //可以直接放链接(将不启用全局定义域名)
					param, 
				);
				this.resultList = data;
				console.log(data);
				this.modalName = 'gridModal';
			},
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
		background: #FFF;
		
		
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 0;
	}
	.page.show {
		overflow: hidden;
	}
	.input{
		text-align: right;
		font-size: 12px;
	}
	.recount{
		width: 100%;
		margin-bottom: 5px;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
